<script setup>
import { reactive, ref } from 'vue'
import { checkMobile, checkPassword } from '@/utils/validate'
import Upload from '@/components/upload/index.vue'
import { add, update } from '@/api/group'
const props = defineProps({
  outdoors: Array,
  peoples: Array,

})
//自定义事件
const emit = defineEmits(['flush'])

// 表单数据
const formData = ref({
  name: '',
  type: '',
  tbAttendanceRules: null,
  comment: '',
  userIds:[],
})
// 表单验证
// const formRules = reactive({
//   name: [
//     { required: true, message: '请输入字段名称', trigger: 'blur' },
//     { min: 2, max: 6, message: '请输入2~6个字符', trigger: 'blur' }
//   ],
//   password: [
//     { validator: checkPassword, message: '请输入6~12个字符', trigger: 'blur' },
//     { required: true, message: '请输入密码', trigger: 'blur' },
//     { min: 6, max: 12, message: '请输入6~12个字符', trigger: 'blur' }
//   ],
// })
// 提交验证
const formRef = ref()
const onSubmit = () => {
  formRef.value.validate(async (isSuccess) => {
    if (isSuccess) {
      //请求接口 新增接口 或 修改接口
      let r
      if (formData.value.id) {
        r = await update(formData.value)
      } else {
        r = await add(formData.value);
      }
      if (r.code == 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        state.value = false
        emit('flush')
      } else {
        ElMessage({ type: 'info', message: '操作失败' })
      }
     
    }
  })
}
// const onReset = () => {
//   formRef.value.resetFields()
// }
// 对话框状态
const state = ref(false)
const value1 = ref([])
const value2 = ref('')
const value3 = ref('19:12:11')
const num = ref(1)
// 暴露
defineExpose({
  state,
  formData
})
</script>
<template>
  <el-dialog
    v-model="state"
    :title="`${formData.id ? '修改' : '添加'}班次情况`"
    width="600"
    :before-close="() => (state = false)"
  >
    
    <el-form
      v-if="state"
      size="large"
      label-width="120"
      :model="formData"
      :rules="formRules"
      ref="formRef"
    >
      <el-form-item label="考勤组名称" prop="name">
        <el-input placeholder="请输考勤组名称" v-model="formData.name" />
      </el-form-item>
      <el-form-item label="考勤规则" prop="tbAttendanceRules">
        <el-select
       v-model="formData.tbAttendanceRules"
      placeholder="请选择考勤规则"
      style="width: 240px"
    >
      <el-option
        v-for="item in outdoors"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
        <!-- <el-select v-model="formData.outdoorId" placeholder="请选择考勤规则" size="large">
          <el-option v-for="item in outdoors" :key="item.id" :label="item.name" :value="item.id" />
        </el-select> -->
      </el-form-item>
      <el-form-item label="考勤组人员" prop="userIds">
        <el-select
        multiple
       v-model="formData.userIds"
      placeholder="请选择人员"
      style="width: 240px"
    >
      <el-option
        v-for="item in peoples"
        :key="item.id"
        :label="item.empName"
        :value="item.id"
      />
    </el-select>
    </el-form-item>
      <!-- <el-form-item label="部门名称" prop="depart">
        <el-input placeholder="请输入部门名称" v-model="formData.depart" />
      </el-form-item> -->
      <el-form-item label="是否开启" prop="type">
        <el-radio-group v-model="formData.type" class="ml-4">
          <el-radio label="1" size="large">是</el-radio>
          <el-radio label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
  
      <el-form-item label="考勤组说明">
        <el-input type="textarea" v-model="formData.comment" placeholder="请输入考勤组说明" :rows="3" />
      </el-form-item>

      <el-form-item class="btns">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="default" @click="state = false">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
  </el-dialog>
</template>
